<template>
  <div class="mobile-navigation" :class="navigationClasses">
    <!-- 顶部导航栏 -->
    <nav v-if="showTopNav" class="top-nav" :class="topNavClasses">
      <div class="nav-container">
        <!-- 左侧按钮 -->
        <div class="nav-left">
          <button 
            v-if="showMenuButton" 
            class="menu-button" 
            @click="toggleMenu"
            :aria-label="menuVisible ? '关闭菜单' : '打开菜单'"
          >
            <transition name="icon-rotate" mode="out-in">
              <i v-if="!menuVisible" key="menu" class="el-icon-menu"></i>
              <i v-else key="close" class="el-icon-close"></i>
            </transition>
          </button>
          
          <button 
            v-if="showBackButton" 
            class="back-button" 
            @click="goBack"
            aria-label="返回"
          >
            <i class="el-icon-arrow-left"></i>
          </button>
          
          <slot name="nav-left"></slot>
        </div>

        <!-- 中间标题 -->
        <div class="nav-center">
          <h1 v-if="title" class="nav-title">{{ title }}</h1>
          <slot name="nav-center"></slot>
        </div>

        <!-- 右侧按钮 -->
        <div class="nav-right">
          <slot name="nav-right"></slot>
        </div>
      </div>
    </nav>

    <!-- 侧边菜单遮罩 -->
    <transition name="overlay-fade">
      <div 
        v-if="menuVisible" 
        class="menu-overlay"
        @click="closeMenu"
      ></div>
    </transition>

    <!-- 侧边菜单 -->
    <transition name="menu-slide">
      <aside v-if="menuVisible" class="side-menu" :style="menuStyle">
        <div class="menu-header">
          <slot name="menu-header">
            <div class="menu-title">菜单</div>
            <button class="menu-close" @click="closeMenu">
              <i class="el-icon-close"></i>
            </button>
          </slot>
        </div>
        
        <div class="menu-content">
          <slot name="menu-content">
            <ul class="menu-list">
              <li 
                v-for="item in menuItems" 
                :key="item.key"
                class="menu-item"
                :class="{ active: item.key === activeKey }"
                @click="handleMenuClick(item)"
              >
                <i v-if="item.icon" :class="item.icon" class="menu-icon"></i>
                <span class="menu-text">{{ item.label }}</span>
                <i v-if="item.children" class="el-icon-arrow-right menu-arrow"></i>
              </li>
            </ul>
          </slot>
        </div>
      </aside>
    </transition>

    <!-- 底部导航栏 -->
    <nav v-if="showBottomNav" class="bottom-nav" :class="bottomNavClasses">
      <div class="nav-items">
        <div 
          v-for="item in bottomNavItems" 
          :key="item.key"
          class="nav-item"
          :class="{ active: item.key === activeBottomKey }"
          @click="handleBottomNavClick(item)"
        >
          <div class="nav-icon">
            <i :class="item.icon"></i>
            <span v-if="item.badge" class="nav-badge">{{ item.badge }}</span>
          </div>
          <span class="nav-label">{{ item.label }}</span>
        </div>
      </div>
    </nav>

    <!-- 浮动操作按钮 -->
    <transition name="fab-scale">
      <button 
        v-if="showFab && fabConfig" 
        class="fab"
        :class="fabClasses"
        :style="fabStyle"
        @click="handleFabClick"
        :aria-label="fabConfig.label"
      >
        <i :class="fabConfig.icon"></i>
      </button>
    </transition>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useResponsive } from '@/utils/responsive'

// Props
const props = defineProps({
  // 是否显示顶部导航
  showTopNav: {
    type: Boolean,
    default: true
  },
  // 是否显示底部导航
  showBottomNav: {
    type: Boolean,
    default: true
  },
  // 是否显示菜单按钮
  showMenuButton: {
    type: Boolean,
    default: true
  },
  // 是否显示返回按钮
  showBackButton: {
    type: Boolean,
    default: false
  },
  // 导航标题
  title: {
    type: String,
    default: ''
  },
  // 菜单项
  menuItems: {
    type: Array,
    default: () => []
  },
  // 底部导航项
  bottomNavItems: {
    type: Array,
    default: () => []
  },
  // 当前激活的菜单项
  activeKey: {
    type: String,
    default: ''
  },
  // 当前激活的底部导航项
  activeBottomKey: {
    type: String,
    default: ''
  },
  // 是否固定顶部导航
  fixedTop: {
    type: Boolean,
    default: true
  },
  // 是否固定底部导航
  fixedBottom: {
    type: Boolean,
    default: true
  },
  // 菜单宽度
  menuWidth: {
    type: String,
    default: '280px'
  },
  // 浮动操作按钮配置
  fabConfig: {
    type: Object,
    default: null
  },
  // 是否显示浮动操作按钮
  showFab: {
    type: Boolean,
    default: false
  },
  // 主题色
  themeColor: {
    type: String,
    default: '#409eff'
  },
  // 是否启用安全区域
  safeArea: {
    type: Boolean,
    default: true
  }
})

// Emits
const emit = defineEmits([
  'menu-toggle',
  'menu-click', 
  'bottom-nav-click',
  'fab-click',
  'back-click'
])

// 路由
const router = useRouter()

// 响应式数据
const { isMobile } = useResponsive()
const menuVisible = ref(false)

// 计算属性
const navigationClasses = computed(() => ({
  'mobile-only': isMobile.value,
  'safe-area': props.safeArea
}))

const topNavClasses = computed(() => ({
  'nav-fixed': props.fixedTop,
  'safe-area-top': props.safeArea
}))

const bottomNavClasses = computed(() => ({
  'nav-fixed': props.fixedBottom,
  'safe-area-bottom': props.safeArea
}))

const menuStyle = computed(() => ({
  width: props.menuWidth
}))

const fabClasses = computed(() => ({
  'fab-with-bottom-nav': props.showBottomNav
}))

const fabStyle = computed(() => ({
  backgroundColor: props.themeColor,
  bottom: props.showBottomNav ? '80px' : '20px'
}))

// 方法
function toggleMenu() {
  menuVisible.value = !menuVisible.value
  emit('menu-toggle', menuVisible.value)
}

function openMenu() {
  menuVisible.value = true
}

function closeMenu() {
  menuVisible.value = false
}

function goBack() {
  emit('back-click')
  if (router.currentRoute.value.meta?.canGoBack !== false) {
    router.back()
  }
}

function handleMenuClick(item) {
  emit('menu-click', item)
  if (item.route) {
    router.push(item.route)
  }
  if (item.action) {
    item.action()
  }
  closeMenu()
}

function handleBottomNavClick(item) {
  emit('bottom-nav-click', item)
  if (item.route) {
    router.push(item.route)
  }
  if (item.action) {
    item.action()
  }
}

function handleFabClick() {
  emit('fab-click', props.fabConfig)
  if (props.fabConfig?.action) {
    props.fabConfig.action()
  }
}

// 监听移动端状态变化
watch(isMobile, (newVal) => {
  if (!newVal) {
    menuVisible.value = false
  }
})

// 暴露方法
defineExpose({
  toggleMenu,
  openMenu,
  closeMenu,
  menuVisible
})
</script>

<style scoped>
.mobile-navigation {
  position: relative;
}

/* 顶部导航栏 */
.top-nav {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  z-index: 1000;
}

.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.nav-container {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.menu-button,
.back-button {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--el-text-color-primary);
  font-size: 18px;
  transition: background-color 0.2s;
}

.menu-button:hover,
.back-button:hover {
  background: var(--el-fill-color-light);
}

/* 图标旋转动画 */
.icon-rotate-enter-active,
.icon-rotate-leave-active {
  transition: transform 0.2s ease;
}

.icon-rotate-enter-from {
  transform: rotate(-90deg);
}

.icon-rotate-leave-to {
  transform: rotate(90deg);
}

/* 侧边菜单 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--el-bg-color);
  z-index: 1002;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.menu-header {
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.menu-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--el-text-color-regular);
  font-size: 16px;
}

.menu-content {
  flex: 1;
  overflow-y: auto;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.menu-item:hover {
  background: var(--el-fill-color-light);
}

.menu-item.active {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.menu-icon {
  margin-right: 12px;
  font-size: 18px;
}

.menu-text {
  flex: 1;
  font-size: 16px;
}

.menu-arrow {
  font-size: 14px;
  color: var(--el-text-color-placeholder);
}

/* 菜单动画 */
.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: transform 0.3s ease;
}

.menu-slide-enter-from,
.menu-slide-leave-to {
  transform: translateX(-100%);
}

.overlay-fade-enter-active,
.overlay-fade-leave-active {
  transition: opacity 0.3s ease;
}

.overlay-fade-enter-from,
.overlay-fade-leave-to {
  opacity: 0;
}

/* 底部导航栏 */
.bottom-nav {
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-light);
  z-index: 1000;
}

.nav-items {
  display: flex;
  height: 60px;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
}

.nav-item.active {
  color: var(--el-color-primary);
}

.nav-icon {
  position: relative;
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--el-color-danger);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  line-height: 1;
}

.nav-label {
  font-size: 12px;
  line-height: 1;
}

/* 浮动操作按钮 */
.fab {
  position: fixed;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 999;
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.fab-with-bottom-nav {
  bottom: 80px;
}

/* FAB动画 */
.fab-scale-enter-active,
.fab-scale-leave-active {
  transition: all 0.3s ease;
}

.fab-scale-enter-from,
.fab-scale-leave-to {
  transform: scale(0);
  opacity: 0;
}

/* 安全区域 */
.safe-area .safe-area-top {
  padding-top: var(--safe-area-inset-top, 0);
}

.safe-area .safe-area-bottom {
  padding-bottom: var(--safe-area-inset-bottom, 0);
}

/* 响应式调整 */
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

/* 深色主题适配 */
.dark .top-nav,
.dark .bottom-nav,
.dark .side-menu {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

.dark .menu-overlay {
  background: rgba(0, 0, 0, 0.7);
}
</style>